<template>
  <div class="about-us-container">
    <!-- Banner Section -->
    <div class="about-banner">
      <img src="@/assets/about-us/Frame7.jpg" alt="About Us Banner">
      <div class="banner-content">
        <h3>关于我们</h3>
        <h5>以工业互联网标识解析服务平台为基础，通过开放式对接各种业务应用，助力企业数字化建设，构建行业生态，赋能企业节点用户。</h5>
      </div>
    </div>

    <!-- Content Section -->
    <div class="about-content">

      <div class="content-row">
        <!-- Left Section -->
        <div class="left-section">
          <h2>辽宁迈迪智能工业科技有限公司</h2>
          <div class="yellow-line"></div>
          <p class="left-text">
            <span class="bold-black">辽宁迈迪智能工业科技有限公司</span>
            成立于2021年07月27日，位于辽宁省沈阳市皇姑区昆山中路。
            迈迪智能公司专注于
            <span class="bold-black">工业互联网平台建设运营和标识解析技术服务</span>，
            是工业互联网标识解析平台服务商
            <span class="blue-bold">公司凭借成熟的技术研发经验和大量的客户场景案例，构建起了领先的应用生态布局，拥有完整的数字化产品体系和配套硬件设备。</span>
            
            
            
            
            
            
            
          </p>
        </div>

        <!-- Right Section -->
        <div class="right-section">
          <div class="right-item">
            <div class="icon-container">
              <img src="@/assets/about-us/000000ff.png" alt="Icon 1" class="item-icon">
            </div>
            <div class="text-container">
              <p>承担与工业互联网相关的<span class="blue-bold">发展战路、规划、政策、标准研究</span>，<span class="blue-bold">标识解析体系</span>和<span class="blue-bold">网络、平台、安全体系建设</span>，<span class="blue-bold">国际交流与合作</span>等</p>
            </div>
          </div>

          <div class="right-item">
            <div class="icon-container">
              <img src="@/assets/about-us/000000ff2.png" alt="Icon 2" class="item-icon">
            </div>
            <div class="text-container">
              <p>承担工业和信息化行业<span class="blue-bold">密码基础设施建设、应用研究、标准制定、安全性评估及相关的检测认证、人才培养和宣传培训</span>等。</p>
            </div>
          </div>

          <div class="right-item">
            <div class="icon-container">
              <img src="@/assets/about-us/000000ff3.png" alt="Icon 3" class="item-icon">
            </div>
            <div class="text-container">
              <p>2019年6月3日，工业和信息化部党组决定由我院建设<span class="blue-bold">国家工业互联网大数据中心</span></p>
            </div>
          </div>
        </div>
      </div>
      <div class="additional-section">
        <div class="content-row">
          <!-- Left Section - Image -->
          <div class="left-image-section">
            <img src="@/assets/about-us/Frame198.jpg" alt="Company Image" class="company-image">
          </div>

          <!-- Right Section - Text -->
          <div class="left-section">
            <h2>中小企业数字化升级一站式服务商</h2>
            <div class="yellow-line"></div>
            <p class="right-text">
              <span class="bold-black">辽宁迈迪智能工业科技有限公司</span>
              作为中小企业数字化升级一站式服务商、项目集成商，高新认证、两化融合认证服务商，入选辽宁省工业互联网及智能制造资源池服务商(第一批)。
              <span class="blue-bold">公司以“搭平台、接应用、建生态”为主线，以工业互联网标识解析服务平台为基础</span>，面向全国开展平台的市场推广和运营支撑。公司始终秉持着"数据驱动未来，创新引领发展"的理念，通过不断的技术创新和服务优化，为客户创造价值，助力企业数字化转型。
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- Full Width Image Section -->
    <div class="full-width-image-section">
      <img src="@/assets/about-us/Frame153.jpg" alt="Platform Image">
      <div class="image-overlay-content">
<!--        <div class="title-m">装备制造业</div>
        <div class="title-m">数字供应链平台</div> -->
        <div class="title-m">辽宁省首家工业物联网</div>
        <div class="title-m">标识解析二级节点平台</div>
        <div class="hr-m"></div>
        <div class="content-m">为落实好新型工业化战略部署，在工信部指导下，迈迪智能建设了辽宁省首家工业物联网标识解析二级节点平台（简称平台）。平台提供企业数字化转型升级解决方案，帮助企业减存降本，提质增效，赋能企业可持续高质量发展，共同构建互联、共享、共赢的行业和区域发展生态圈,助力行业、区域产业升级和高质量发展。</div>
      </div>
    </div>

    <!-- Platform History Section -->
    <div class="platform-history-section">
      <div class="history-content">
        <div class="selection-title" style="display: none;">
          <div class="title-bgtext">PHYLOGENY</div>
          <div class="title-text">平台大事记</div>
        </div>
        <img class="timeline-image" src="@/assets/about-us/Group632.png" alt="Timeline" style="display: none;">

        <div class="vision-section">
          <div class="title-img"><img src="@/assets/about-us/Union.png" alt="Vision Icon"></div>
          <div class="title-m">发展愿景</div>
          <div class="content-m">引领万物互联科技、提升企业数字化价值，铸就世界级工业互联网平台</div>
        </div>
      </div>
    </div>
    <contact-footer></contact-footer>
  </div>
</template>

<script>
import ContactFooter from "@/view/homeComponents/banner.vue";

export default {
  name: 'AboutUs',
  components: {ContactFooter}
}
</script>

<style scoped>
.about-us-container {
  width: 100%;
  background-color: #F3F5F7;
 }

 /* Banner Styles */
.about-banner {
  height: 220px;
  position: relative;
  overflow: hidden;
}

.about-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  color: white;
}

.banner-content h3 {
  font-weight: 700;
  font-size: 33px;
  line-height: 36px;
  text-align: center;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0;
}

.banner-content h5 {
  font-size: 16px;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0.04em;
  color: #fff;
  padding-top: 15px;
  margin: 0;
}

/* Content Styles */
.about-content {
  max-width: 1200px;
  margin: 50px auto;
  padding: 0 20px;
}

.content-row {
  display: flex;
  flex-wrap: wrap;
  gap: 80px;
}

.left-section {
  flex: 1;
  min-width: 300px;
  text-align: left;
}

.right-section {
  flex: 1;
  min-width: 300px;
  margin-left: 20px;
}

.left-section h2 {
  font-size: 36px;
  color: #002E70;
  margin-bottom: 20px;
}

.yellow-line {
  width: 100px;
  height: 2px;
  background-color: #f6b021;
  margin-bottom: 30px;
}

.left-text {
  color: #5a5a5a;
  font-size: 14px;
  line-height: 35px;
  text-align: left;
}

.bold-black {
  font-weight: bold;
  color: #000;
}

.blue-bold {
  color: #002E70;
  font-weight: bold;
}

/* Right Section Styles */
.right-item {
  display: flex;
  margin-bottom: 30px;
  align-items: flex-start;
}

.icon-container {
  flex-shrink: 0;
  margin-right: 20px;
  margin-top: 20px;
}

.item-icon {
  width: 60px;
  height: 60px;
}

.text-container {
  flex: 1;
  color: #5a5a5a;
  font-size: 14px;
  line-height: 35px;
  text-align: left;
}

.additional-section {
  margin-top: 20px;
  margin-bottom: 80px;
}

.left-image-section {
  flex: 1;
  min-width: 300px;
}

.company-image {
  width: 100%;
  max-width: 650px;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  border-radius: 4px;
}

.right-text-section {
  flex: 1;
  min-width: 300px;
  margin-left: 60px;
}

.right-text-section h2 {
  font-size: 36px;
  color: #002E70;
  margin-bottom: 20px;
}

.right-text {
  color: #5a5a5a;
  font-size: 14px;
  line-height: 35px;
  text-align: left;
}
.full-width-image-section {
  position: relative;
  height: 580px;
  width: 100%;
  overflow: hidden;
}

.full-width-image-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-overlay-content {
  position: absolute;
  right: 10%;
  top: 110px;
  color: white;
  max-width: 520px;
  text-align: left;
}

.image-overlay-content .title-m {
  font-weight: 700;
  font-size: 42px;
  line-height: 70px;
  letter-spacing: 0.02em;
  color: #fff;
}

.image-overlay-content .hr-m {
  width: 132px;
  height: 4px;
  background-color: #f6b021;
  margin: 40px 0;
}

.image-overlay-content .content-m {
  font-weight: 500;
  font-size: 14px;
  line-height: 35px;
  letter-spacing: 0.02em;
  color: #fff;
}

/* Platform History Section */
.platform-history-section {
  background-color: #fff;
  padding-top: 50px;
  background-image: url('@/assets/about-us/bg.jpg');
  background-size: cover;
  background-position: center center;
}

.history-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 100px;
}

.selection-title {
  text-align: center;
  width: 100%;
  position: relative;
  padding-top: 32px;
  margin-bottom: 120px;
}

.selection-title .title-bgtext {
  font-size: 70px;
  font-weight: 400;
  line-height: 82px;
  letter-spacing: 0.01em;
  color: #f5f5f5;
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  z-index: 0;
}

.selection-title .title-text {
  font-size: 44px;
  font-weight: 900;
  line-height: 58px;
  letter-spacing: 0.02em;
  text-align: center;
  color: #002e70;
  position: relative;
  z-index: 1;
}

.timeline-image {

  max-width: 1200px;
  height: 480px;
  margin: 0 auto;
}


.title-img {
  width: 110px;
  margin: 0 auto;
  padding-top: 50px;
}

.platform-history-section .title-m {
  font-weight: 600;
  font-size: 42px;
  line-height: 59px;
  text-align: center;
  letter-spacing: 0.02em;
  color: #002e70;
}

.platform-history-section .content-m {
  font-weight: 600;
  font-size: 20px;
  line-height: 37px;
  text-align: center;
  letter-spacing: 0.02em;
  color: #002e70;
  max-width: 800px;
  margin: 0 auto;
}

</style>